<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			.d1{
				width: 500px;
				height: 500px;
				/* 背景颜色 */
				background-color: #e40c3b;
				/* 画圆：1.空间 2.边框/背景颜色填充3.倒角 */
				border-radius: 50%;
				
			}
			.d2{
				width: 300px;
				height: 300px;
				background-color: #ffff00;
				border-radius: 50%;
				/* 相对定位：根据父级进行定位 */
				position: relative;
				left: 100px;
				top: 100px;
			}
			.d3{
				width: 100px;
				height: 100px;
				background-color: #ff007f;
				border-radius: 50%;
				position: relative;
				left: 100px;
				top: 100px;
			}
			p{
				width: 60px;
				height: 400px;
				background-color: #ff01c4;
				position: relative;
				left: 399px;
				top: -64px;
				    transform: rotate(-30deg);
				}
				.d4{
					width: 200px;
					height: 200px;
					border-top: 6px solid red;
					border-left: 6px solid red;
					border-radius: 50%;
					transform: rotate(45deg);
					
					
				}
			}
		</style>
	</head>
	<body>
		<!-- 思路：html 4个元素 嵌套
		     1.设置嵌套3个div
			 2.设置一个p
			    css
				选择器：抓取页面元素 ②类选择器，任何元素通用属性class="别名"
		   -->
		<div class="d1">
			<div class="d2">
				<div class="d3"></div>
			</div>
		</div>
		<p></p>
		<div class="d4"></div>
	</body>
</html>